<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入患者姓名" class="input short mr10"
                                      size="small"></el-input>
                            <el-select v-model="state" placeholder="预约状态" class="select short mr10"
                                       size="small">
                                <el-option
                                    v-for="item in stateOptions"
                                    t :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="docState" placeholder="就诊医生状态" class="select short mr10"
                                       size="small">
                                <el-option
                                    v-for="item in docStateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-date-picker v-model="searchTime" size="small" class="short mr10"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                            <el-button @click="dataExport()" size="small">导出</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :stripe="true"
                                   :slot-columns="slotColumns">
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==3">已过期</span>
                            <span v-else-if="scope.row.state==2">已取消</span>
                            <span v-else-if="scope.row.state==1">有效</span>
                        </template>
                        <template slot="docState" slot-scope="scope">
                            <span
                                v-if="(scope.row.subDocState&&scope.row.subDocState==1)||(scope.row.docState&&scope.row.docState==1)">接诊</span>
                            <span
                                v-else-if="(scope.row.subDocState&&scope.row.subDocState==2)||(scope.row.docState&&scope.row.docState==2)">长期停诊</span>
                            <span
                                v-else-if="(scope.row.subDocState&&scope.row.subDocState==3)||(scope.row.docState&&scope.row.docState==3)">不接诊</span>
                            <span
                                v-else-if="(scope.row.subDocState&&scope.row.subDocState==4)||(scope.row.docState&&scope.row.docState==4)">临时停诊</span>
                        </template>
                        <template slot="docName" slot-scope="scope">
                            <span>{{scope.row.subDocName || scope.row.docName}}</span>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <!--            <transition name="slide">-->
            <!--                <router-view @upload="getList"></router-view>-->
            <!--            </transition>-->
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import qs from 'qs'

    export default {
        data() {
            return {
                name: '', // 患者姓名
                searchTime: '',
                stateOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '已过期',
                        value: 3
                    },
                    {
                        label: '有效',
                        value: 1
                    },
                    {
                        label: '已取消',
                        value: 2
                    }
                ],
                docStateOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '接诊',
                        value: 1
                    },
                    {
                        label: '长期停诊',
                        value: 2
                    },
                    {
                        label: '不接诊',
                        value: 3
                    },
                    {
                        label: '临时停诊',
                        value: 4
                    }
                ],
                docState: '', // 就诊医生状态
                state: '', // 预约状态

                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '患者',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'sex',
                        label: '性别',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'age',
                        label: '年龄',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '手机号码',
                        minWidth: '120',
                        align: 'center'
                    },
                    {
                        prop: 'idCard',
                        label: '身份证号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '预约状态',
                        minWidth: '80',
                        align: 'center'
                    },
                    {
                        prop: 'visitTime',
                        label: '就诊时间',
                        align: 'center',
                        minWidth: '180'
                    },
                    {
                        prop: 'docName',
                        label: '就诊医生',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'docState',
                        label: '就诊医生状态',
                        minWidth: '110',
                        align: 'center'
                    },
                    {
                        prop: 'dept',
                        label: '就诊科室',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '提交时间',
                        align: 'center',
                        minWidth: '180'
                    }
                ],
                slotColumns: ['state', 'docState', 'docName', 'docState'],
                page: {},
                index: 1,
                loading: false
            }
        },
        mounted() {
            let start = this.$filter.timeFormat(null, 'YYYY-MM-DD'),
                end = this.$filter.timeFormat(null, 'YYYY-MM-DD')
            this.searchTime = [start, end]
            this.getList()
        },
        methods: {
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/appointment/getAppointmentPageList', {
                    startTime: this.searchTime && this.searchTime[0] ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '', // 起始时间
                    endTime: this.searchTime && this.searchTime[1] ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '', // 结束时间
                    name: this.name,
                    docState: this.docState,
                    state: this.state,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                let start = this.$filter.timeFormat(null, 'YYYY-MM-DD'),
                    end = this.$filter.timeFormat(null, 'YYYY-MM-DD')
                this.searchTime = [start, end]
                this.name = ''
                this.docState = ''
                this.state = ''
                this.getList(1)
            },
            // 导出表格
            dataExport() {
                let params = {
                    name: this.name,
                    docState: this.docState,
                    state: this.state,
                    startTime: this.searchTime && this.searchTime[0] ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '', // 起始时间
                    endTime: this.searchTime && this.searchTime[1] ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '' // 结束时间
                }, url = '/_api/appointment/downLoadDeptListToExcel'
                url += '?' + qs.stringify(params)
                window.open(location.origin + url, '_blank')
            },
            approval(row, type) {
                this.$http.post('/appointment/downLoadDeptListToExcel', {
                    id: row.id,
                    approvalResult: type
                }).then(result => {
                    this.getList()
                })
            }
        },
        components: {
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">
    .content {
    }
</style>
